1. Dom元素無生成完畢，使用this.$nextTick

情境：Dom元素無生成 導致 refs 無法使用預設方法 .focus()
～～computed無法使用～～
methods、mounted內可下

this.$nextTick(() => {
                console.log("Hihi");
            });

2. API來不及抓取之處理

情境：API尚未抓到值，導致渲染時無資料
此API有用getter先抓取到，因此監聽該getter值，比較新舊，藉由新舊之不同觸發

    watch: {
        aaa(newVal, oldVal) {
            // 此時API接到值並更新aaa，致觸發watch
            if (newVal === 1 && oldVal === 0) {
              // if為防呆，指定取得API後執行以下渲染
              this.methods();....
            }
        },

狀況：

Computed return Data值 卡住
Data為API回傳資料，塞入

return initLeagueListData[sportType][`${this.curSport}`]

1. 錯誤方法：
   有嘗試用watch去監聽gette(抓api值)，再把getter到的資料放入Data，但因為起始就是空值，所以return就卡住了，沒辦法往下跑，watch也就無效

2. 解答：
   把預設值Data拿掉，如果資料沒拿到直接讓computed回傳空[]，成功就會走try

    try {
        // obj資料
        const objData = this.listData[type][this.kind];
        // 排序
        return Object.keys(objData)
            .sort((a, b) => a - b)
            .map(order => (Object.assign({}, objData[order], 
            {
                order,
            })));
    } catch (err) {
        return [];
    }

3. refs抓到DOM元素時，同document.querySelector('XXX')

會有DOM元素的長相

4. 傳值方式

a. VueX > getter 格式：state創值 > mutation連接action及state > action改變值 > getter取值
前內後外，前子後父
b. props > 外傳內(父傳子) > 格式：(當前頁面data + 標籤:) 及 (子元件頁面 + data props)
c. emit > 內傳外(子傳父) > 格式：(當前頁面methods + 標籤@) 及 (子元件頁面 + methods)
d. refs > dom外傳內 > 可使用子data、methods、及變動Dom (但不能變更data值，只能取用)